<template>
    <div >
      <div class="tops">
        <!-- 请选择随机号：<el-select v-model="randomn" placeholder="请选择" @change="hoschange()">
                    <el-option
                      v-for="item in randomnArr"
                      :key="item.id"
                      :label="item.random_num"
                      :value="item.id">
                    </el-option>
                  
                  </el-select> -->
                  <el-button type="primary" @click="printing()">打印</el-button>
      </div>
      <div>
        <el-table
            :data="randomnArr"
            style="width: 100%"
            border
            >
            <el-table-column
              prop="random_num"
              label="随机号"
              width="100">
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              width="100"
             >
            </el-table-column>
            <el-table-column
              prop="dealdrop"
              label="处理人"
              width="100"
              >
            </el-table-column>
            <el-table-column
              prop="dropcycles"
              label="脱落周期"
              width="100"
              >
            </el-table-column>
            <el-table-column
              prop="droptime"
              label="脱落时间"
                width="200"
              >
            </el-table-column>
            <el-table-column
              prop="drop"
              label="脱落原因"
              >
            </el-table-column>
           
            
            
            
           
           
          </el-table>
      </div>
          <div style="clear: both"></div>
            <div id="printTarget" v-show="false" style="width: 100%;">
              <table style="width: 100%;border-collapse: collapse;font-size: 15px">
              
                    <tbody>
                        <tr  style="border: 1px solid #000">
                          <td align="center" style="border-right: 1px solid #000;width:100px">随机号</td>
                          
                          <td align="center" style="border-right: 1px solid #000;width:100px">
                            姓名
                          </td>
                          <td align="center" style="border-right: 1px solid #000;width:100px">处理人</td>
                          <td align="center" style="border-right: 1px solid #000;width:150px">
                            脱落周期
                          </td>
                          <td align="center" style="border-right: 1px solid #000;width:200px">脱落时间</td>
                          <td align="center" style="border-right: 1px solid #000;">脱落原因 </td>

                        </tr>
                        <tr v-for="item in randomTant" style="border: 1px solid #000">
                          <td align="center" style="border-right: 1px solid #000;">{{item.random_num}}</td>
                          
                          
                          <td align="center" style="border-right: 1px solid #000;">{{item.name}}</td>
                          <td align="center" style="border-right: 1px solid #000;">
                            {{item.dealdrop}}
                          </td>
                          <td align="center" style="border-right: 1px solid #000;">{{item.dropcycles}}</td>
                          <td align="center" style="border-right: 1px solid #000;">{{item.droptime}}</td>
                          <td align="center" style="border-right: 1px solid #000;">{{item.drop}}</td>

                        </tr>
                    </tbody>
                   
                </table>
              <!-- </div> -->
            </div>


    </div>
</template>

<script>
  import http from '../../../api/http'

  export default {
    name: 'hello',
    data () {
      return {
        randomn:'',
        randomnArr:[],
        randomTant:[],
        itmeList:[],
        nameP:'',
        randomsj:'',
        projectInformation:null,
        projectName:'',
        num:'',
        bidder:'',
        randomNum:'',

      }
    },

    methods: {
      comeOn(){
        var vm = this;
        if (vm.$utils.getCurrenrProject().id == null) {
          vm.$notify({title: '操作提示', message: '请选择项目', type: 'error'});
        }
        http.postData(vm,'/pt/subjectsGroup/dropList',{projectid:vm.$utils.getCurrenrProject().id},function (resp) {
          console.log(resp)
          vm.randomnArr=resp.body.value;

        })
      },
      
      printing(){
         var vm=this;
        if (vm.$utils.getCurrenrProject().id == null) {
          vm.$notify({title: '操作提示', message: '请选择项目', type: 'error'});
          return;
        }
        vm.projectInformation = null;

        http.postData(vm, '/pt/subjectsGroup/dropList', {projectid:vm.$utils.getCurrenrProject().id}, function (resp) {
            var ret = resp.body;
            console.log(ret);
            if (ret.code == 111) {
              vm.randomTant=resp.body.value;
              setTimeout(function () {
                var printHtml = vm.$el.querySelector("#printTarget").innerHTML;
                var wid = window.open('blank', '_blank', 'width=200px;');
                wid.document.write(printHtml);
                setTimeout(function () {
                  wid.print();
                  wid.close();
                }, 1000);
              }, 500);
            }else{
              if (vm.randomn == '') {
                  vm.$notify({title: '操作提示', message: '请选择随机号', type: 'error'});
                  return;
                }
            }
          })
      }
     
     
    },
    mounted(){
      this.comeOn();
      


    }
  }
  </script>
<style scoped>
.oneChart{
  width:900px;
  border:1px solid #79c4a5;
  margin: 0 auto;
  margin-top: 20px;
}
.theadD td{
  width:100px;
}
.tops{
  margin:0 0 5px 0;
  background-color: #fff;
}
</style>
